<template>
   <van-row>
    <van-col span="24">
      <!-- 查询餐品信息 -->
        <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="getFoodByBid"
          >
          <div style="cursor: pointer;" v-for="food in foodList" :key="food.foodId" 
                                       >
            <!-- 列表项 -->
            <van-row style="margin-top: 5px;">
              <van-col :span="8" align="center" >
                  <img :src="food.foodImg" style="width: 60%;height: 60px;">
              </van-col>
              <van-col :span="16" align="left" >
                  <div style="font-size: 16px;">{{food.foodName}}</div>
                  <div style="font-size: 12px;">{{food.foodExplain}}</div>
                  <div style="font-size: 12px;">{{food.foodPrice}}</div>
              </van-col>
            </van-row>
          </div>
          
        </van-list>
    </van-col>
  </van-row>
</template>

<script setup>
import { ref,getCurrentInstance, onMounted } from 'vue';
import {showNotify } from 'vant';

  const {proxy} = getCurrentInstance();

  const loading = ref(false);  //加载的状态  查询之前置为true  查询完毕置为false
  const finished = ref(false);  //所有的数据全部查完之后置为true

  const bid = ref(null);  //商家id值

  const foodList = ref([]);

  const getFoodByBid = ()=>{

        if(!bid.value){
            showNotify({ message: '无商家编号无法查询' });
            return;
        }

        proxy.$axios({
          method: 'get',
          url: '/food/business/'+bid.value
        }).then(res=>{
          let resultBean = res.data;
          if(resultBean.code == 200){
            foodList.value = resultBean.data;
          }else{
            showNotify({ message: resultBean.msg });
          }
        }).catch(error=>{
          showNotify({ message: error.message });
        })
    }

  onMounted(()=>{
    console.log('*********',proxy.$route.params.bid);
    //接收路由传递的参数   商家的id值   用商家的id值查询这个商家所有的餐品
    bid.value = proxy.$route.params.bid;
  })

</script>

<style>
</style>